<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; Charset=utf-8" />
    <meta http-equiv="Content-Language" content="zh-CN" />
<!--    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />-->
    <title>煮酒听雨-一个java程序员的个人博客网站</title>
    <link rel="shortcut icon" href="images/logo.png" type="image/x-icon" />
    <script src="js/jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="layui/css/layui.css" >
    <link rel="stylesheet" href="css/adminLogin.css" >
</head>
<body>
<div class="wrap">
    <img src="images/bg/2435cacf13034069961fb2002f15fe53.png" class="imgStyle">
    <div class="loginForm">
        <form>
            <div class="logoHead">
                <!--<h2 style="margin-top: 15px">房产销售平台管理系统</h2>-->
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="loginUsername" class="layui-input adminInput" type="text" name="username" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="loginPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>验证码:</label>
                </div>
                <div class="cardDiv">
                    <input id="loginCard" class="layui-input cardInput" type="text" name="card" placeholder="输入验证码">
                </div>
                <div class="codeDiv">
                    <input id="loginCode" class="layui-input codeInput"  type="button">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="submitLabel">
                    <label>没有账号？<a href="#" id="loginRegister">点击注册</a></label>
                </div>
                <div class="submitDiv">
                    <input id="loginBtn" type="button" class="submit layui-btn layui-btn-primary" value="登录"></input>
                </div>
            </div>
        </form>
    </div>
</div>
<!--获取IP地址的js-->
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="js/baseUrl.js"></script>
<script src="js/cookieUtils.js"></script>
<script src="layui/layui.js" type="text/javascript"></script>
<script>
    layui.use(['layer'],function () {
        var layer = layui.layer;
    })
    var IP = "";
    var IPAddress = "";
    $(function () {
        // 页面初始化生成验证码
        window.onload = createCode('#loginCode');
        // 验证码切换
        $('#loginCode').click(function () {
            createCode('#loginCode');
        });
        // 登陆事件
        $('#loginBtn').click(function () {
            login();
        });
        // 注册事件
        $('#loginRegister').click(function () {
            register();
        });
        // IP地址获取
        IP = returnCitySN["cip"];
        IPAddress = returnCitySN["cname"];
        // console.log(IP + "--"+IPAddress);
    });
    // 生成验证码
    function createCode(codeID) {
        var code = "";
        // 验证码长度
        var codeLength = 4;
        // 验证码dom元素
        var checkCode = $(codeID);
        // 验证码随机数
        var random = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R',
            'S','T','U','V','W','X','Y','Z'];
        for (var i = 0;i < codeLength; i++){
            // 随机数索引
            var index = Math.floor(Math.random()*36);
            code += random[index];
        }
        // 将生成的随机验证码赋值
        checkCode.val(code);
    }
    // 校验验证码、用户名、密码
    function validateCode(inputID,codeID) {
        var inputCode = $(inputID).val().toUpperCase();
        var cardCode = $(codeID).val();
        var loginUsername = $('#loginUsername').val();
        var loginPassword = $('#loginPassword').val();
        if(!verify(loginUsername,"用户名")) return false;
        if(!verify(loginPassword,"密码")) return false;
        if(!verify(inputCode,"验证码")) return false;
        if (inputCode != cardCode){
            layer.msg("请输入正确验证码");
            return false;
        }
        return true;
    }
    // 登录流程
    function login() {
        if (!validateCode('#loginCard','#loginCode')){
            //阻断提示
        }else {
            var loginUsername = $('#loginUsername').val();
            var loginPassword = $('#loginPassword').val();
            var params = {};
            params.ip = IP;
            params.username = loginUsername;
            params.password = loginPassword;
            var loginLoadIndex = layer.load(2);
            $('#loginBtn').val("正在登录...");
            $.ajax({
                type:'post',
                url:baseUrl+'/blog/user/login',
                // dataType:'html',
                // data:JSON.stringify(params),
                data:params,
                // contentType:'application/json',
                success:function (data) {
                    layer.close(loginLoadIndex);
                    layer.msg(data.msg);
                    if (data.status == 200) {
                        var time = data.data.time;
                        setCookie(tgyBlog_user_id,data.data.userId,"s"+time);
                        setCookie(tgyBlog_user_token,data.data.token,"s"+time);
                        window.location.href = indexUrl + "index.html";
                    }
                    $('#loginBtn').val("登录");
                },
                error:function () {
                    layer.close(loginLoadIndex);
                    $('#loginBtn').val("登录");
                    layer.msg("请求超时！");
                }
            });
        }

    }
    // 注册流程
    function register() {
        layer.open({
            type:'1',
            content:$('.registerPage'),
            title:'注册',
            area:['430px','500px'],
            btn:['注册','重置','取消'],
            closeBtn:'1',
            btn1:function (index,layero) {
                //注册回调
                var nickname = $('#nickname').val();
                var registerUsername = $('#registerUsername').val();
                var registerPassword = $('#registerPassword').val();
                var registerWellPassword = $('#registerWellPassword').val();
                var selectValue = $('#roleSelect option:selected').val();
                if(!verify(nickname,"昵称")) return false;
                if(!verify(registerUsername,"用户名")) return false;
                if(!verify(registerPassword,"密码")) return false;
                if(!verify(registerWellPassword,"确认密码")) return false;
                if (registerPassword != registerWellPassword){
                    layer.msg("两次密码不一致");
                    return false;
                }
                var params = {};
                params.ip = IP;
                params.nickname = nickname;
                params.account = registerUsername;
                params.password = registerPassword;
                params.registerWellPassword = registerWellPassword;
                params.sex = selectValue;
                var registerLoadIndex = layer.load(2);
                $.ajax({
                    type:'post',
                    url:baseUrl+'/blog/user/register',
                    // dataType:'json',
                    // data:JSON.stringify(params),
                    data:params,
                    // contentType:'application/json',
                    success:function (data) {
                        layer.close(registerLoadIndex);
                        layer.msg(data.msg);
                        if (data.status == 200) {
                            clearRegisterFrom();
                            layer.close(index);
                        }
                    },
                    error:function () {
                        layer.close(registerLoadIndex);
                        clearRegisterFrom();
                        layer.msg("请求超时！")
                    }
                });
            },
            btn2:function (index,layero) {
                //重置回调
                clearRegisterFrom();
                // 防止注册页面关闭
                return false;
            },
            btn3:function (index,layero) {
                //取消回调
                clearRegisterFrom();
            }
        })
    }
    // 清空注册表单的验证
    function clearRegisterFrom() {
        var nickname = $('#nickname').val("");
        var registerUsername = $('#registerUsername').val("");
        var registerPassword = $('#registerPassword').val("");
        var registerWellPassword = $('#registerWellPassword').val("");
    }
    // 验证表单
    function verify(value,title) {
        var reg = /[\u4E00-\u9FA5]|[\uFE30-\uFFA0]/g;
        if (/\s/g.test(value)) {
            layer.msg(title+"不能有空格");
            return false;
        }
        if ($.trim(value) == '' || $.trim(value).length<=0){
            layer.msg(title+"不能为空");
            return false;
        }
        if (reg.test(value) && title != '昵称') {
            layer.msg(title+"不能有中文");
            return false;
        }
        if ($.trim(value).length < 6 && "用户名-密码".indexOf(title) != -1) {
            layer.msg(title+"长度不能小于6");
            return false;
        }
        return true;
    }
</script>

</body>
<div class="registerPage">
    <div class="registerDiv">
        <form>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>昵称:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-user adminIcon"></i>
                    <input id="nickname" class="layui-input adminInput" type="text" name="nickname" placeholder="输入昵称"  >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>用户名:</label>
                </div>
                <div class="usernameDiv">
                    <i class="layui-icon layui-icon-username adminIcon"></i>
                    <input id="registerUsername" class="layui-input adminInput" type="text" name="account" placeholder="输入用户名" >
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>确认密码:</label>
                </div>
                <div class="passwordDiv">
                    <i class="layui-icon layui-icon-password adminIcon"></i>
                    <input id="registerWellPassword" class="layui-input adminInput" type="password" name="password" placeholder="输入密码">
                </div>
            </div>
            <div class="usernameWrapDiv">
                <div class="usernameLabel">
                    <label>性别:</label>
                </div>
                <div class="passwordDiv">
                    <select name="sex" id="roleSelect" class="layui-select">
                        <option value="女">女</option>
                        <option value="男">男</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>
</html>